<template>
  <div class="AddFile">
    <!-- 位置信息 -->
    <div class="AddFile-title">
      <div class="AddFile-title-text">新增数据集</div>
      <div class="AddFile-title-text"></div>
    </div>

    <div class="AddFile-dialog-content">
      <el-form ref="form" label-width="110px">
        <el-row class="AddFile-row">
          <el-col :span="24">
            <el-form-item label="上传文件：">
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :auto-upload="false"
                :on-change="handleChange"
                multiple
                :limit="1"
                :on-remove="handleRemove"
              >
                <div class="fre-table">点击上传</div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 添加进度条 -->
        <el-row class="AddFile-row" v-if="percent > 0 && percent <= 100">
          <el-col :span="24">
            <el-progress :percentage="percent" status="success"></el-progress>
          </el-col>
        </el-row>
        <el-row class="AddFile-row">
          <el-col :span="24">
            <el-form-item label="数据集名称：">
              <div class="AddFile-input">
                <el-input
                  v-model="resource.dataSetName"
                  placeholder="请输入数据集名称"
                >
                </el-input>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="AddFile-row">
          <el-col :span="24">
            <el-form-item label="数据集类型：">
              <div class="AddFile-select">
                <el-select
                  v-model="resource.dataSetType"
                  placeholder="请选择数据集类型"
                >
                  <el-option label="话音测试" :value="1"></el-option>
                  <el-option label="数据测试" :value="2"></el-option>
                  <el-option label="视频测试" :value="3"></el-option>
                </el-select>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="AddFile-row">
          <el-col :span="24">
            <el-form-item label="数据集描述：">
              <div class="AddFile-select">
                <el-input
                  type="textarea"
                  rows="3"
                  v-model="resource.remark"
                  placeholder="请输入数据集描述"
                >
                </el-input>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="fre-table saveBtn" @click="addResourceData">保存</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AddFile",
  data() {
    return {
      fileList: null, // 上传的文件
      resource: {
        //使用json传输
        dataSetName: "", // 数据集名称
        dataSetType: 1, // 数据集类型，1：话音，2：数据，3：视频
        remark: "数据集描述", // 数据集描述，非必填
      },
    };
  },
  computed: {
    percent() {
      return this.$store.getters.percent;
    },
  },
  watch: {},
  components: {},
  props: {},
  methods: {
    // 关闭弹窗
    closeDialog() {
      this.$emit("closeDialog");
    },
    //添加文件
    addResourceData() {
      this.$emit("addResourceData", this.resource, this.fileList);
    },
    handleChange(file, fileList) {
      console.log("添加文件", file, fileList);
      this.fileList = file.raw;
    },
    handleRemove(file, fileList) {
      console.log("删除文件", file, fileList);
      this.fileList = null;
    },
  },
  mounted() {},
};
</script>
<!-- 因为是弹窗，所以全局方法 -->
<style lang="scss" scoped>
.AddFile {
  position: relative;
  width: 100%; /* 自定义弹窗宽度 */
  background: url("~@/assets/images/taskDefinition/define-background.png")
    no-repeat;
  background-size: 100% 100%;
  padding: 1.25rem;
  .AddFile-title {
    width: 100%;
    height: 2.5rem;
    line-height: 2.5rem;
    color: #fff;
    font-size: 1.125rem;
    margin: 0px 0.625rem 0.625rem 1.25rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    .AddFile-title-text {
      background: url("~@/assets/images/taskDefinition/vice-title.png")
        no-repeat;
      background-size: 100% 100%;
      flex: 1;
      padding-left: 1.5625rem;
    }
  }
  .AddFile-dialog-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.9375rem;
    .AddFile-select,
    .AddFile-input {
      width: 12.5rem;
      position: relative;
    }
    .AddFile-row {
      margin-bottom: 10px;
    }
  }
}
.saveBtn {
  text-align: center;
  margin-top: 1.25rem;
}

.fre-table {
  width: 5.625rem;
  height: 2.5rem;
  line-height: 2.5rem;
  text-align: center;
  color: #fff;
  background: url("~@/assets/images/taskDefinition/btn.png") no-repeat;
  background-size: 100% 100%;
  margin-right: 0.625rem;
  cursor: pointer;
}
</style>
